<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>
    <fieldset>
        <legend>
            计算属性
        </legend>
        <p>
            所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。
            在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。
        </p>
        <fieldset>
            <legend>计算属性的基本用法</legend>
            <div id="app1">
                <p>
                    将字符串反转(调用方法实现)：{{text.split(',').reverse().join(',')}}
                </p>
                <p>
                    将字符串反转(使用计算属性实现)：{{reversedText}}
                </p>
                <p>
                    <!--注意，这里的reversedText是方法，所以要带()-->
                    将字符串反转(调用methods里的方法实现)：{{reversedTextFn()}}
                </p>
            </div>
        </fieldset>
        <fieldset>
            <legend>vue计算属性computed和methods的区别</legend>
            <p>
                计算属性 ：和普通属性一样是在模板中绑定计算属性的，当data中对应数据发生改变时，计算属性的值也会发生改变。
                Methods：methods是方法，只要调用它，函数就会执行。
                相同：两者达到的效果是同样的。
                不同：计算属性是基于它们的依赖进行缓存的，只有相关依赖会发生改变时才会重新求职。只要相关依赖未改变，只会返回之前的结果，不再执行函数。
            </p>
            <div id="app2">
                <p>
                    <input type="text" v-model="num1"/>
                    <input type="text" v-model="num2"/>
                </p>
                <p>返回num1乘以num2的积(使用计算属性)：{{sum}}</p>
                <p>返回num1乘以num2的积(调用方法)：{{sumFn()}}</p>
            </div>
        </fieldset>
    </fieldset>
</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app1 = new Vue({
        el:"#app1",
        data:{
            text:'123,456'
        },
        /**
         * 所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。
         */
        computed:{//定义计算属性的相关方法
            reversedText:function () {
                console.log("调用计算属性reversedText");
                //这里的this指向的是当前的Vue实例
                return this.text.split(',').reverse().join(',');//计算属性必须有一个返回值
            }
        },
        methods:{//定义方法
            reversedTextFn:function () {
                console.log("调用reversedTextFn方法");
                //这里的this指向的是当前的Vue实例
                return this.text.split(',').reverse().join(',');
            }
        }
    });

    var app2 = new Vue({
        el:"#app2",
        data:{
            num1:0,
            num2:0
        },
        /**
         * 所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。
         */
        computed:{
            sum:function() {
                console.log("调用计算属性sum");
                return this.num1*this.num2;
            }
        },
        methods:{
            sumFn:function () {
                console.log("调用方法sumFn");
                return this.num1*this.num2;
            }
        }
    });
</script>